<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC Video Chat</title>
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://cdn.staticfile.net/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="./index.css"> <!-- 引入页面样式 -->
</head>

<body>
    <header>
        <h1>WebRTC Video Chat</h1> <!-- 页面标题 -->
    </header>
    <main class="main-container">
        <section class="video-container">
            <div class="self-video">
                <video id="myVideo" muted playsinline></video> <!-- 自己的视频画面 -->
                <div class="video-controls" id="videoControls">
                    <button class="video-control" title="Mute"><i class="icon ion-volume-up"></i></button>
                    <!-- 静音按钮 -->
                    <button class="video-control" title="Play/Pause"><i class="icon ion-play"></i></button>
                    <!-- 播放/暂停按钮 -->
                </div>
                <p class="username-tag">You</p> <!-- 用户名标签 -->
            </div>
            <div id="peerVideos" class="flex-center">
                <!-- Peer videos will be appended here --> <!-- 这里将附加对端视频 -->
            </div>
        </section>
        <!-- 聊天界面 -->
        <section id="chatSection">
            <ul id="chatMessages"></ul> <!-- 聊天消息列表 -->
            <form id="chatForm"></form>
            <input type="text" id="messageInput" placeholder="Type your message..."> <!-- 输入框 -->
            <button type="submit">Send</button> <!-- 发送按钮 -->
            </form>
        </section>
        <div id="status">正在初始化...</div> <!-- 状态提示 -->
    </main>
</body>
</html>
<script src="./index.js"></script>